// 引入vue
import Vue from 'vue'

// 引入vue里的路由器
import VueRouter from 'vue-router'

import Home from '../layout/Home.vue'
import login from '../views/Login'
import Dash from '../views/Dashboard'
import _ from 'lodash'

// 百度查询的解决了路由重复触发的报错，怎么操作的咱不知道
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    return originalPush.call(this, location, onResolve, onReject)
  }
  return originalPush.call(this, location).catch((err) => err)
}

// 调用vue.use方法,相当于安装路由器
Vue.use(VueRouter)

// 定义一个routes数组,里面是所有路由的跳转信息
const routes = [
  // 主页 App.vue
  {
    path: '/',
    component: Home,
    children: [
      // 后台页面
      {
        path: '/',
        component: Dash
      }
    ]
  },
  // 登录页
  {
    path: '/login',
    component: login
  },
  {
    path: '/goods',
    name: '商品管理',
    component: () => import(/* webpackChunkName: "goods" */ '../views/Goods'),
    children: [
      // 商品列表
      {
        path: '/goods/list',
        name: '商品列表',
        component: () =>
          import(/* webpackChunkName: "goods" */ '../views/Goods/GoodsList.vue')
      },
      // 添加商品
      {
        path: '/goods/add',
        name: '商品添加',
        component: () =>
          import(/* webpackChunkName: "goods" */ '../views/Goods/GoodsAdd.vue')
      },
      //  商品编辑
      {
        path: '/goods/edit/:id',
        name: '商品编辑',
        // hidden是隐藏的意思，这个页面不需要在Aside栏展示，所以隐藏
        hidden: true,
        // visible 是显示的意思
        // visible:false,
        component: () =>
          import(/* webpackChunkName: "goods" */ '../views/Goods/GoodsEdit.vue')
      }
    ]
  },
  {
    path: '/orders',
    name: '订单信息',
    component: () => import(/* webpackChunkName: "orders" */ '../views/Orders')
  },
  {
    path: '/charts',
    name: '可视化数据',
    meta: { role: [1] },
    component: () => import(/* webpackChunkName: "charts" */ '../views/Charts'),
    children: [
      // 订单详情
      {
        path: '/charts/order',
        name: '订单详情',
        component: () =>
          import(/* webpackChunkName: "charts" */ '../views/Charts/Orders.vue')
      },
      // 销量管理
      {
        path: '/charts/SellCount',
        name: '销量管理',
        component: () =>
          import(
            /* webpackChunkName: "charts" */ '../views/Charts/SellCount.vue'
          )
      }
    ]
  },
  {
    path: '/users',
    name: '用户管理',
    meta: { role: [1, 2] },
    component: () => import(/* webpackChunkName: "users" */ '../views/Users'),
    children: [
      // 用户列表
      {
        path: '/users/list',
        name: '用户列表',
        meta: { role: [1] },
        component: () =>
          import(/* webpackChunkName: "users" */ '../views/Users/UserList.vue')
      },
      // 添加用户
      {
        path: '/users/add',
        name: '添加用户',
        meta: { role: [1] },
        component: () =>
          import(/* webpackChunkName: "users" */ '../views/Users/UserAdd.vue')
      },
      // 修改密码
      {
        path: '/users/restpwd',
        name: '修改密码',
        meta: { role: [1, 2] },
        component: () =>
          import(/* webpackChunkName: "users" */ '../views/Users/ResetPwd.vue')
      },
      // 个人中心
      {
        path: '/users/my',
        meta: { role: [1, 2] },
        // hidden是隐藏的意思，这个页面不需要在Aside栏展示，所以隐藏
        hidden: true,
        name: '个人中心',
        component: () =>
          import(/* webpackChunkName: "users" */ '../views/personal/index.vue')
      }
    ]
  }
  // 所有的不正确的地址，直接跳转404error页
  // {
  //   path: '*',
  //   redirect: '/error'
  // },
  // // 错误页 404
  // {
  //   path: '/error',
  //   component: () =>
  //     import(/* webpackChunkName: "error" */ '../views/error.vue')
  // }

  // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
]

// 提取静态路由，拿出来做遍历，筛选，过滤，添加权限操作
const AsyncRoutes = {
  path: '/',
  component: Home,
  children: [
    // 后台页面
    {
      path: '/',
      name: '后台首页',
      component: Dash
    },
    // 商品管理
    {
      path: '/goods',
      name: '商品管理',
      component: () => import(/* webpackChunkName: "goods" */ '../views/Goods'),
      children: [
        // 商品列表
        {
          path: '/goods/list',
          name: '商品列表',
          component: () =>
            import(
              /* webpackChunkName: "goods" */ '../views/Goods/GoodsList.vue'
            )
        },
        // 添加商品
        {
          path: '/goods/add',
          name: '商品添加',
          component: () =>
            import(
              /* webpackChunkName: "goods" */ '../views/Goods/GoodsAdd.vue'
            )
        },
        //  商品编辑
        {
          path: '/goods/edit/:id',
          name: '商品编辑',
          // hidden是隐藏的意思，这个页面不需要在Aside栏展示，所以隐藏
          hidden: true,
          // visible 是显示的意思
          // visible:false,
          component: () =>
            import(
              /* webpackChunkName: "goods" */ '../views/Goods/GoodsEdit.vue'
            )
        }
      ]
    },
    // 订单管理
    {
      path: '/orders',
      name: '订单信息',
      component: () =>
        import(/* webpackChunkName: "orders" */ '../views/Orders')
    },
    // 可视化数据
    {
      path: '/charts',
      name: '可视化数据',
      meta: { role: [1] },
      component: () =>
        import(/* webpackChunkName: "charts" */ '../views/Charts'),
      children: [
        // 订单详情
        {
          path: '/charts/order',
          name: '订单详情',
          component: () =>
            import(
              /* webpackChunkName: "charts" */ '../views/Charts/Orders.vue'
            )
        },
        // 销量管理
        {
          path: '/charts/SellCount',
          name: '销量管理',
          component: () =>
            import(
              /* webpackChunkName: "charts" */ '../views/Charts/SellCount.vue'
            )
        }
      ]
    },
    // 用户管理
    {
      path: '/users',
      name: '用户管理',
      meta: { role: [1, 2] },
      component: () => import(/* webpackChunkName: "users" */ '../views/Users'),
      children: [
        // 用户列表
        {
          path: '/users/list',
          name: '用户列表',
          meta: { role: [1] },
          component: () =>
            import(
              /* webpackChunkName: "users" */ '../views/Users/UserList.vue'
            )
        },
        // 添加用户
        {
          path: '/users/add',
          name: '添加用户',
          meta: { role: [1] },
          component: () =>
            import(/* webpackChunkName: "users" */ '../views/Users/UserAdd.vue')
        },
        // 修改密码
        {
          path: '/users/restpwd',
          name: '修改密码',
          meta: { role: [1, 2] },
          component: () =>
            import(
              /* webpackChunkName: "users" */ '../views/Users/ResetPwd.vue'
            )
        },
        // 个人中心
        {
          path: '/users/my',
          meta: { role: [1, 2] },
          // hidden是隐藏的意思，这个页面不需要在Aside栏展示，所以隐藏
          hidden: true,
          name: '个人中心',
          component: () =>
            import(
              /* webpackChunkName: "users" */ '../views/personal/index.vue'
            )
        }
      ]
    }
  ]
}
// 根据用户权限计算新的路由
export function getNewRoutes() {
  // role 1 超级管理员  role 2 普通管理员
  const role = JSON.parse(localStorage.getItem('users') || '{}').group_id
  if (!role) return
  // 设置一个常量lastRoutes为过滤后的有children的2级路由
  const lastRoutes = filterRoutes(role, AsyncRoutes.children)
  // console.log(lastRoutes)
  // 把过滤后的2级路由赋值给1级路由的子路由
  AsyncRoutes.children = lastRoutes
  // 添加AsyncRoutes这个对象
  router.addRoute(AsyncRoutes)
  // 在已有的路由上，再次过滤需要展示在侧边栏的路由，进行保存
  const menuArr = _.cloneDeep(lastRoutes)
  const newMenu = filterMenus(menuArr)
  localStorage.setItem('menu', JSON.stringify(newMenu))
}

function filterMenus(arr) {
  return arr.filter((item) => {
    if (item.hidden) {
      return false
    } else {
      if (item.children) {
        item.children = filterMenus(item.children)
      }
      return true
    }
  })
}

// getNewRoutes()
// 真正过滤数组的函数
function filterRoutes(n, arr) {
  return arr.filter((item) => {
    if (item.meta && item.meta.role) {
      if (item.meta.role.includes(n)) {
        // 以证明是需要鉴权的，如果有子路由，需要再过滤一次
        if (item.children) {
          // 通过自身调用自身（也就是递归）把子路由也过滤出来
          item.children = filterRoutes(n, item.children)
        }
        return true
      } else {
        return false
      }
    } else {
      //  如果没有当前的字段，那么就保留公共的路由
      return true
    }
  })
}
// 定义一个路由器名,将上面的数组传值进去
const router = new VueRouter({
  routes
})
// 根据access_token是否存在来判断是否有登录凭证,进而决定是否可以完成路由跳转,所以这个路由守卫写在index.js里
// 使用路由的导航卫视完成登录拦截功能
router.beforeEach((to, from, next) => {
  // 根据登录之后保存的凭证（token值）就能够知道是否有登录
  // const token = localStorage.getItem('token')
  // 可以直接获取到data对象，需注意，localStorage 里只能保存字符串
  // 然后通过JSON.parse()转换为对象
  const users = localStorage.getItem('users') || '{}'
  const token = JSON.parse(users).access_token
  // 如果taken值存在
  if (token) {
    // 就跳转到相对应的路由
    next()
    // 如果携带的跳转路径是登录页,那么不论是否有taken登录凭证,都可以跳转到登录页
  } else {
    if (to.path === '/login') {
      next()
      // 如果没有token值,并且跳转的不是登录页,则强行跳转至登录页
    } else {
      next('/login')
    }
  }
})

// 导出路由器
export default router
